<template>
  <div>
    <h3>团购订单</h3>
    <input type="text">
    <hr>
    <div>姓名: {{obj.name}}</div>
    <div>性别: {{obj.sex}}</div>
    <div>年龄: {{obj.age}}</div>
    <button @click="clickHandler">给对象动态添加年龄</button>
  </div>
</template>

<script>
export default {
  name: "GroupOrder",
  data() {
    return {
      obj: {
        name: '张三',
        sex: '男'
      }
    }
  },
  methods: {
    clickHandler() {
      // this.obj.age = 33; // 这样添加不是响应式数据
      // console.log(this.obj);

      this.$set(this.obj, 'age', 33); // 添加响应式数据

      console.log(this.obj);
    }
  }
}
</script>

<style scoped>

</style>